<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card>
      <!-- 
            表单组件
            model: 表单数据对象	
            label-width: 表示label的宽度
         -->
      <el-form ref="form" :model="form" label-width="80px">
        <!-- label: 表示标题（标签文本） -->
        <el-form-item label="标题:">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-radio-group @change="typeChange" v-model="form.type">
            <!-- 动态v-bind可以将字符串转成数字 -->
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="内容">
          <!-- 富文本组件 -->
          <VueEditor v-show="form.type == 1" :config="config" ref="vueEditor" />
          <!-- 文件上传 -->
          <el-upload
            v-show="form.type == 2"
            :action="baseURL + '/upload'"
            :headers="headers"
            :limit="1"
            :on-success="videoSuccess"
            :on-remove="videoRemove"
            :on-exceed="videoExceed"
            :file-list="videoList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <!-- 多选框 -->
        <el-form-item label="栏目">
          <!-- indeterminate：表示复选框的不确定状态（选中了一部分选项，但没有全选） 
                v-model:表示绑定全选框的状态值
                change：复选框状态改变时触发的事件
          -->
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>

          <el-checkbox-group
            v-model="checkedCategory"
            @change="handleCheckedCategoryChange"
          >
            <el-checkbox
              v-for="(item, index) in Category"
              :label="item.id"
              :key="index"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <!-- 封面组件 -->
        <el-form-item label="封面">
          <el-upload
            :action="baseURL + '/upload'"
            list-type="picture-card"
            :headers="headers"
            :on-success="coverSuccess"
            :on-remove="coverRemove"
            :on-exceed="coverExceed"
            :limit="3"
            :file-list="form.cover"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 发布文章按钮 -->
        <el-form-item>
          <el-button type="primary" @click="publishFn">发布文章</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script>
import { article } from "@/api/article.js";
import axios from "@/utils/request";
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import { getCategory } from "@/api/common.js";
import { publish } from "@/api/article.js";
import { editArticle } from "@/api/article.js";
export default {
  //注册
  components: {
    VueEditor,
  },
  created() {
    getCategory().then((res) => {
      console.log(115, res);
      this.Category = res.data.data.slice(2);
    });

    let id = this.$route.query.id;
    if (id) {
      article(id).then((res) => {
        console.log(119, res);
        //标题回显
        this.form.title = res.data.data.title;
        //类别回显
        this.form.type = res.data.data.type;
        // 文章回显
        if (res.data.data.type == 1) {
          let quill = this.$refs.vueEditor.editor;
          quill.clipboard.dangerouslyPasteHTML(0, res.data.data.content);
        } else {
          // 视频回显
          this.videoList = [
            {
              name: "小视频",
              url: res.data.data.content,
            },
          ];
          this.form.content = res.data.data.content;
        }
        // 栏目回显
        this.checkedCategory = res.data.data.categories.map((item) => {
          return item.id;
        });
        // 封面回显
        this.form.cover = res.data.data.cover.map((item) => {
          let url =
            item.url.indexOf("http") == -1 ? this.baseURL + item.url : item.url;
          return {
            id: item.id,
            url: url,
          };
        });
      });
    }
  },
  data() {
    return {
      baseURL: axios.defaults.baseURL,
      headers: { Authorization: localStorage.getItem("back-token") },
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
      config: {
        // 上传图片的配置
        uploadImage: {
          url: axios.defaults.baseURL + "/upload", //文章上传到服务器端的处理路径
          name: "file", //后台所需要的参数的名称
          headers: { Authorization: localStorage.getItem("back-token") }, //设置请求头信息
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.data.url); //文件上传之后的回调，接收服务器响应回来的数据，根据服务器的地址进行填充
          },
        },

        // 上传视频的配置
        uploadVideo: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          // headers: this.getToken(), //设置请求头信息
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },
      },
      checkAll: false,
      isIndeterminate: false,
      checkedCategory: [],
      Category: [],
      videoList: [],
    };
  },
  methods: {
    // 类型切换的时候,不清空内容 ,会存在一些问题
    typeChange() {
      this.form.content = "";
      this.videoList = [];
    },
    //视频超出限制的时候触发的回调函数
    videoExceed() {
      this.$message({
        message: "视频最多只能上传一条哦",
        type: "warning",
      });
    },
    // 视频删除的时候触发的回调函数
    videoRemove() {
      this.form.content = "";
    },
    // 文件上传成功的回调函数
    videoSuccess(res) {
      console.log(res);
      this.form.content = res.data.url;
    },
    //上传数量提醒的回调函数
    coverExceed() {
      this.$message.error("上传图片数量不能超过三张");
    },
    // 删除上传的图片的回调函数
    coverRemove(file, fileList) {
      console.log(136, file, fileList);
      this.form.cover = fileList.map((item) => {
        //后期补充:因为upload组件添加了file-list属性 , 因此移除封面的时候返回的参数结构发生了变化
        // 因此需要我们处理数据的时候修改为如下写法
        return { id: item.id, url: item.url };
      });
    },
    //图片上传成功后的回调函数
    coverSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      // 需要把id包装成对象push到cover中，后端规定的
      this.form.cover.push({
        id: response.data.id,
        // 后期补充:封面上传成功后,需要将url页添加到数组对象中
        url: this.baseURL + response.data.url,
      });
      console.log(139, this.form.cover);
    },
    //发布文章
    publishFn() {
      // 标题判断
      if (!this.form.title) {
        this.$message.error("标题不能为空");
        return;
      }
      //判断富文本不能为空
      if (this.form.type == 1) {
        let quill = this.$refs.vueEditor.editor;
        let length = quill.getLength();
        if (length == 1) {
          this.$message.error("富文本不能为空");
          return;
        }
      } else {
        // 判断视频不能为空
        if (!this.form.content) {
          this.$message.error("视频不能为空");
          return;
        }
      }
      // 判断栏目不能为空
      if (!this.checkedCategory.length) {
        this.$message.error("栏目不能为空");
        return;
      }
      // 判断封面不能为空
      if (this.form.cover.length == 0) {
        this.$message.error("封面不能为空");
        return;
      }
      let content = this.$refs.vueEditor.editor.root.innerHTML;
      if (this.form.type == 1) {
        this.form.content = content;
      }
      this.form.categories = this.checkedCategory.map((id) => {
        return { id: id };
      });
      console.log(168, this.form);
      //有id即为编辑
      let id = this.$route.query.id;
      if (id) {
        editArticle(id).then((res) => {
          console.log(270, res);
          if (res.data.message == "文章编辑成功") {
            this.$router.push("/layout/articleList");
            this.$message.success(res.data.message);
          } else {
            this.$message.error(res.data.message);
            return;
          }
        });
        return;
      }
      //没id即为发布
      console.log(292, this.form);
      publish(this.form).then((res) => {
        console.log(169, res);
        if (res.data.message == "文章发布成功") {
          this.$message.success(res.data.message);
          this.$router.push("/layout/articleList");
          return;
        }
        this.$message.error(res.data.message);
      });
    },
    // 点击全选框触发的事件
    handleCheckAllChange(bool) {
      // 根据全选框的状态值 ，把checkedCategory赋值为全部栏目id的1集合此刻表示全部选中了
      // checkedCategory赋值为空数组，则表示取消全选
      console.log(bool); //bool表示全选框的bool值
      this.checkedCategory = bool ? this.Category.map((item) => item.id) : [];
      this.isIndeterminate = false;
    },
    // 点击小选框触发的事件
    handleCheckedCategoryChange(val) {
      // val表示选中的选项集合
      // 设置全选框的不确定的状态 ，isIndeterminate值为true表示不确定状态
      // 当选中的选项不为空，且选中的选中长度不等于全部栏目数组长度的时候表示“不确定状态”
      console.log(val);
      this.isIndeterminate =
        val.length !== this.Category.length && val.length ? true : false;
      // 当x小选框全部选中的时候，自动把全选框也选中
      // 当选中的选项集合长度等于所有栏目集合长度的时候表示已经全部选中了
      this.checkAll = val.length == this.Category.length ? true : false;
    },
  },
};
</script>


<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>